import { Form, Input, Button, Table, Popconfirm, Space, Pagination } from 'antd'
import React, { useState, useEffect } from 'react';
import './building_information_management.scss'
import { useNavigate } from 'react-router-dom'
import BuildingAdd from './BuildingAdd/BuildingAdd';
import BuildingSpace from './BuildingSpace/BuildingSpace'
import http from '../../utils/http'
import store from '../../store/index'
const Building_information_management = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState([])
    // 批量删除
    const [batchDel, setBatchDel] = useState(0)
    const [buildingData, setBuildingData] = useState([])
    // 总条数
    const [total, setTotal] = useState([])
    const [current, setCurrent] = useState(1)
    // 楼宇详情
    function dataKey(data) {
        let arr = data.map((item) => {
            return {
                key: item.tenId,
                tenAllarea: item.tenAllarea,
                tenAllnum: item.tenAllnum,
                tenDescribe: item.tenDescribe,
                tenId: item.tenId,
                tenMoney: item.tenMoney,
                tenName: item.tenName,
                tenOverarea: item.tenOverarea,
                tenOvernum: item.tenOvernum,
                tenPhoto: item.tenPhoto,
                tenRealarea: item.tenRealarea,
                tenSerialint: item.tenSerialint,
                tenUnderarea: item.tenUnderarea,
                tenUndernum: item.tenUndernum,
                tenWher: item.tenWhere
            }
        })
        setBuildingData(arr)
        console.log(buildingData);
    }
    const getBuilding = () => {
        http({
            url: '/tenement/findTenement',
            params: {
                current: current
            }
        }).then((res) => {
            if (res.code === 200) {
                console.log(res.data);
                dataKey(res.data.records)
                setTotal(res.data.total)
                setCurrent(current)
            }

        })
    }
    useEffect(() => {
        // 获取AJax渲染页面的方法
        getBuilding()

    }, [])

    let navigate = useNavigate()
    // form 表单
    const [form] = Form.useForm();
    const [isBuildingAdd, setIsBuildingAdd] = useState(false);
    const [isBuildingSpace, setIsBuildingSpace] = useState(false);
    // 新增
    const nuildingAdd = () => {
        setIsBuildingAdd(true)
        setIsBuildingSpace(false)
        navigate('/home/Operate/BuildingInformationManagement/BuildingAdd')
    }

    // 查询
    const nuildingQuery = () => {
        const v = form.getFieldsValue(true)
        http({
            url: "/tenement/findTenement",
            params: {
                ten_name: v.username
            }
        }).then((res) => {
            console.log(res);
            if (res.code === 200) {
                dataKey(res.data.records)
                setCurrent(res.data.current)
                setTotal(res.data.total)
            }
        })
    }
    // 重置
    const commomReset = () => {
        form.resetFields("")
        setSelectedRowKeys([])
        getBuilding()
    }

    // 去空间管理
    const openSpaceManagement = (text, record, index) => {
        setIsBuildingAdd(false)
        setIsBuildingSpace(true)
        navigate('/home/Operate/BuildingInformationManagement/BuildingSpace')
        store.zhangxi.buildingDetails = record
    }
    function cancel(e) {
    }
    // 删除
    function buildingDel(a, b) {
        let tenId = []
        if (b) {
            tenId.push(b.tenId)
        } else {
            tenId = batchDel.map((item) => {
                return item.tenId
            })
        }
        console.log(tenId);
        http({
            url: '/tenement/deleteSpace_Ten',
            method: 'post',
            data: tenId,
        }).then((res) => {
            console.log(res);
            if (res.code === 200) {
                getBuilding()
            }
        })
    }
    const columns = [
        {
            title: '楼宇名称',
            dataIndex: 'tenName',
        },
        {
            title: '楼宇编号',
            dataIndex: 'tenSerialint',
        },
        {
            title: '层数',
            dataIndex: 'tenAllnum',
        },
        {
            title: '物业费',
            dataIndex: 'tenMoney',
        },
        {
            title: '建筑面积',
            dataIndex: 'tenAllarea',
        },
        {
            title: '在管面积',
            dataIndex: 'tenRealarea',
        },
        {
            title: '排序',
            dataIndex: 'tenId',
        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (text, record, index) => (
                <Space size="middle">
                    <a href="#" onClick={() => { openSpaceManagement(text, record, index) }}>空间管理</a>
                    <Popconfirm
                        title="确定要删除吗?"
                        onConfirm={() => { buildingDel(text, record) }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    const rowSelection = {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
            setSelectedRowKeys(selectedRowKeys)
            setBatchDel(selectedRows)
        },
        getCheckboxProps: (record) => ({
            name: record.name,
        }),
    };

    if (isBuildingSpace) {
        return (
            <div className='building_father'>
                <BuildingSpace current={current} setIsBuildingSpace={setIsBuildingSpace} />
            </div>
        )
    } else if (isBuildingAdd) {
        return (
            <div className='building_father'>
                <BuildingAdd setIsBuildingAdd={setIsBuildingAdd} />
            </div>
        )
    } else {
        return (
            <div className='building_father'>
                <Form form={form} name="horizontal_login" layout="inline" className='title'>
                    <Form.Item
                        name="username">
                        <div className='kuai'>
                            <span></span>
                            <span>楼宇信息管理</span>
                        </div>
                    </Form.Item>
                    <Form.Item className='btn'>
                        <div>
                            <Button className='cha'
                                type="primary"
                                onClick={nuildingAdd}>新增</Button>
                            <Button className='resize' onClick={buildingDel} type="primary">批量删除</Button>
                        </div>

                    </Form.Item>
                </Form>
                <div className='biao'>
                    <Form form={form} name="horizontal_login" layout="inline" className='Role'>
                        <Form.Item
                            name="username"
                            label='楼宇名称'
                        ><Input placeholder='请输入角色姓名' />
                        </Form.Item>
                        <Form.Item className='btn'>
                            <div>
                                <Button className='cha'
                                    type="primary"
                                    onClick={nuildingQuery}>查询</Button>
                                <Button className='resize' onClick={commomReset} type="primary">重置</Button>
                            </div>

                        </Form.Item>
                    </Form>
                    <Table
                        className='table1'
                        rowSelection={{
                            ...rowSelection,
                        }}
                        columns={columns}
                        dataSource={buildingData}
                        pagination={false}
                    />
                    <Pagination
                        total={total}
                        current={current}
                        onChange={(e) => {
                            setCurrent(e)
                            console.log('change', current, "e", e);
                            setSelectedRowKeys([])
                            http({
                                url: '/tenement/findTenement',
                                params: {
                                    current: e
                                }
                            }).then((res) => {
                                console.log(res);
                                if (res.code === 200) {
                                    dataKey(res.data.records)
                                }

                            })
                        }} />
                </div>
            </div>
        )
    }

};



export default Building_information_management